寓教于乐，Grid 布局小游戏 Grid Attack

最近没事瞄了一眼 CSS Grid 的 CaniUse：

不得不说，兼容性已经达到了一个可以开始大规模使用的地步了。除去一些最近新出的关于 CSS Grid 的新特性，譬如间距 gap、支持瀑布流布局的 grid-template-column: masonry，已经可以放心的在业务中开始使用 Grid 布局了。

如何从入门到熟练使用 Grid？-- Grid-Attack

但是，CSS Grid 的一大坨语法总是容易让人望而生畏，心生退意。

最近我就在寻找有没有可以比较好锻炼 CSS Grid 布局的方式，好好复习一下 Grid 语法。

无意间，找到了这个网站，一个通过游戏闯关的模式，实现 Grid 语法的从入门到熟练掌握：

WebSite - CSS-Grid-Attack^[1]：通过游戏闯关的方式学习 grid 布局

Grid Attack 的一些简介

简单介绍一下 Grid Attack。它的一些核心特点。

即便是在 Grid 布局方面零基础的同学，也可以尝试下，游戏一共有 80 关。在每一关的开始前，都会介绍 1 到 2 个 grid 相关的属性，并且给出相应的 Demo 和解释，通过 Demo，我们基本就能理解该属性如何具体使用。

然后，利用给出的提示和部分代码，通过完成指定的 Grid 布局，解锁该关卡，进入下一关。

尝试一下

OK，我们实际尝试一下。这里是 #50，第 50 题。

题目如下：

题目已经给出的代码：

<div id="field">
  <div class="greenLand"></div>
  <div id="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
</div>

#field {
  display: grid;
  gap: 20px;
  grid-template: 1fr 1fr / 1fr 1fr;
  /* type here */

}

我们需要做的，就是在题目要求的 type here 的地方，补全，我们的代码。使得，让绿色虚线和红色虚线边框内放置正确的 grid item。

我们可以看到题目中的 Grid item 有 6 个，但是实际只定义了一个 2x2 的 grid 布局 grid-template: 1fr 1fr / 1fr 1fr，因此，这里考察的其实是 Grid 布局中的 显示网格和隐式网格。

根据提示，控制多出来的网格的排布，就需要 grid-auto-columns 和 grid-auto-rows。

我们需要通过定义代码，让最后的两个 grid item，占据 100px 的高度即可。

题解如下：

#field {
  display: grid;
  gap: 20px;
  grid-template: 1fr 1fr / 1fr 1fr;
  /* type here */
  grid-auto-rows: 100px;
}

右侧的布局也会实时变化，更新如下：

可以看到，绿色虚线和红色虚线边框内正确地放置了 6 grid item。本关就通过了。

这里，其实我们省略了一些过程，譬如去学习了解，搞懂 grid-auto-columns 和 grid-auto-rows 的过程。

这个项目有意思的地方在于，有 3 种游戏模式，涵盖了简单、中等和困难不同级别的 CSS 网格知识。

其次是它互动有趣的环境 ，让学习感觉就像在玩耍，很有意思。

下面是官方给的一些介绍图：

感觉写的有点像软文了，但是确实我自己完整做完 80 关，感觉收获还是很大的。

初学者可以把它当成边学习语法边巩固的一个习题网站，而已经有一定基础的可以当成一个查缺补漏的复习工具。

网址：https://codingfantasy.com/games/css-grid-attack

尝试一下，开启 Grid 布局的大门~

最后

好了，本文到此结束，希望对你有帮助 :)

参考资料

[1]

WebSite - CSS-Grid-Attack: https://codingfantasy.com/games/css-grid-attack/play?mode=medium&love=true

- EOF -

加主页君微信，不仅前端技能+1

主页君日常还会在个人微信分享前端开发学习资源和技术文章精选，不定期分享一些有意思的活动、岗位内推以及如何用技术做业余项目

加个微信，打开一扇窗

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️